<template>
    <DatePicker
        :transfer-class-name="search ? 'searchDatePicker' : ''"
        :editable="false"
        type="datetimerange"
        :value="Dates"
        format="yyyy-MM-dd HH:mm"
        placement="bottom-start"
        confirm
        ref="datePicker"
        :placeholder="placeholder"
        style="width: 280px"
        transfer
        :options="disableOptions"
        :disabled="disabled"
        @on-ok="clickOkBtn"
        @on-clear="clickClearBtn"
        @on-open-change="switchOpenChange"
        @on-change="changeDates"
    ></DatePicker>
</template>
<script>
import { mapState } from 'vuex'
import { TimeFormatter } from '@/libs/utils'
export default {
    props:{
        value: { //显示、隐藏
            type: Array,
            default: () => []
        },
        disabled:{
            type:Boolean,
            default:false
        },
        min:{
            type:[String,Number],
            default:''
        },
        max:{
            type:[String,Number],
            default:''
        },
        placeholder:{
            type:String,
            default:'选择日期'
        },
        search:{ 
            type:Boolean,
            default:false
        }
        // range:{
        //     type:Object,
        //     default:() => ({
        //         min:0,
        //         max:0
        //     })
        // }
    },
    data() {
        return {
            Dates:this.value || [],
            isClickOkBtn: false, // 是否点击了DatePicker组件的确认按钮
            originalTime: [], // 展示DatePicker组件时的初始时间
        }
    },
    computed: {
        ...mapState(['currentTime']),
        curMin(){
            if((this.min || this.min === 0) && typeof this.min === 'number'){
                return TimeFormatter.time(this.min)
            }else if(this.min){
                return this.min
            }else{
                return this.search ? '' : TimeFormatter.time(Date.now())
            }
        },
        curMax(){
            if(this.max && typeof this.max === 'number'){
                return TimeFormatter.time(this.max)
            }else if(this.max){
                return this.max
            }else{
                return ''
            }
        },
        disableOptions(){
            if(!this.curMin && !this.curMax){
                return {}
            }
            let _this = this;
            return {
                disabledDate(date) {
                    let max = _this.curMax;
                    let min = _this.curMin;
                    if(min && max){
                        return date && (date.valueOf() > new Date(max.split(' ')[0] + ' 23:59:59').getTime() || date.valueOf() < new Date(min.split(' ')[0]+' 00:00:00').getTime())
                    }else if(min){
                        return date && date.valueOf() < new Date(min.split(' ')[0]+' 00:00:00').getTime()
                    }else if(max){
                        return date && date.valueOf() < new Date(max.split(' ')[0] + ' 23:59:59').getTime()
                    }
                }
            }
        }
    },
    watch:{
        value(val){ //赋值
            this.Dates = val;
        }
    },
    mounted(){
        
    },
    methods: {
        // 点击确认按钮关闭DatePicker组件时，标记状态
        clickOkBtn() {
            this.isClickOkBtn = true
        },
        clickClearBtn() {
            this.Dates = []
            this.$emit('input',this.Dates);
            this.$emit('on-change',this.Dates);
            this.clickOkBtn()
        },
        changeDates(timeList) {
            let [startTime,endTime] = timeList;
            if(startTime && endTime){
                startTime = startTime+':00';
                endTime = endTime+':00';
                if(this.search) {
                    this.Dates = [startTime,endTime]
                } else {
                    if(this.curMin && new Date(startTime).getTime() < new Date(this.curMin).getTime()){
                        // let range = new Date(this.curMin).getTime() - new Date(startTime).getTime();
                        startTime = this.curMin;
                        if(new Date(endTime).getTime() < new Date(this.curMin).getTime()){
                            endTime = startTime;
                            // let time = new Date(startTime).getTime() + range;
                            // if(this.curMax){
                            //     time = Math.min(time,new Date(this.curMax).getTime())
                            // }
                            // endTime = TimeFormatter.time(time);
                        }
                    }
                    if(this.curMax && new Date(endTime).getTime() > new Date(this.curMax).getTime()){
                        // let range = new Date(endTime).getTime() - new Date(this.curMax).getTime();
                        endTime = this.curMax;
                        if(new Date(startTime).getTime() > new Date(this.curMax).getTime()){
                            startTime = endTime;
                            // let time = new Date(endTime).getTime() - range;
                            // if(this.curMin){
                            //     time = Math.max(time,new Date(this.curMin).getTime())
                            // }
                            // startTime = TimeFormatter.time(time);
                        }
                    }
                    this.Dates = [startTime,endTime]
                }
            }else{
                this.Dates = []
            }
            this.$emit('input',this.Dates);
            this.$emit('on-change',this.Dates);
        },
        // 切换DatePicker组件显示/关闭的状态
        switchOpenChange(isOpen) {
            this.$nextTick(() => {
                if (isOpen) { // 显示组件
                    this.isClickOkBtn = false
                    this.originalTime = this.Dates
                } else { // 隐藏操作
                    if (!this.isClickOkBtn && !this.search) { // 不是通过点击确认按钮关闭DatePicker组件时，复原时间
                        let beginTime = this.originalTime[0]
                        let endTime = this.originalTime[1]
                        if (beginTime && endTime) { 
                            this.Dates = [beginTime,endTime]
                        } else {
                            this.$refs['datePicker'].handleClear()
                        }
                    }
                    this.$emit('input',this.Dates);
                    this.$emit('on-change',this.Dates);
                }
            })
        }
    }
}
</script>
<style>
    .searchDatePicker .ivu-picker-confirm button:last-child {
        display: none;
    }
</style>